import React, { useEffect, useState } from 'react'
import { Row, Col, Icon, Divider, Card, Button, DatePicker } from 'antd'
import * as echarts from 'echarts'
import moment from 'moment'
import {
    queryDataViewCountIndexOne, queryDataViewCountIndexOneEither,
    queryDataViewCountIndexThree,
    queryDataViewCountIndexTwo
} from '@/services/login'
import approve from '@/assets/approve.png'
import send from '@/assets/send.png'
import styles from './index.less'
const { RangePicker } = DatePicker
import img1 from '../../assets/img1.png'
import img2 from '../../assets/img2.png'
import img3 from '../../assets/img3.png'
import img4 from '../../assets/img4.png'
import img5 from '../../assets/img5.png'
import img6 from '../../assets/img6.png'
import img7 from '../../assets/img7.png'
import img8 from '../../assets/img8.png'
import img9 from '../../assets/img9.png'
import img10 from '../../assets/img10.png'
import img11 from '../../assets/img11.png'
import img12 from '../../assets/img12.png'
import img13 from '../../assets/img13.png'
import img14 from '../../assets/img14.png'
import img15 from '../../assets/img15.png'

const Dashboard = () => {
    const [dataView1, setDataView1] = useState({})
    const [dataView2, setDataView2] = useState({})
    const [defaultValue1, setDefaultValue1] = useState([
        moment(moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')),
        moment(moment().format('YYYY-MM-DD 23:59:59'))
    ])
    const [defaultValue2, setDefaultValue2] = useState([
        moment(moment(new Date()).format('YYYY-MM-DD 00:00:00')),
        moment(moment(new Date()).format('YYYY-MM-DD 23:59:59'))
    ])

    const [isNearSevenAudit, setNearSevenAudit] = useState(true)
    const [isNearThirtyAudit, setNearThirtyAudit] = useState(false)
    const [isNearSevenRent, setNearSevenRent] = useState(false)
    const [isNearThirtyRent, setNearThirtyRent] = useState(false)

    const [auditAndOverDue, setAuditAndOverDue] = useState([])
    const [rentList, setRentList] = useState([])
    //每日审核通过率、逾期率统计--初始化折线图
    const loadLineEcharts = () => {
        const lineChart = echarts.init(
            document.getElementsByClassName('lineEcharts')[0]
        )
        // 指定图表的配置项和数据
        const option = {
            title: {
                // text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['审核通过率', '逾期率']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: auditAndOverDue.map(item => item.recordTime)
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '审核通过率',
                    type: 'line',
                    // stack: 'Total',
                    data: auditAndOverDue.map(item => item.todayAuditTotalQuantityRate)
                },
                {
                    name: '逾期率',
                    type: 'line',
                    // stack: 'Total',
                    data: auditAndOverDue.map(item => item.todayOverDueOrderNumRate)
                }
            ]
        }

        // 使用刚指定的配置项和数据显示图表。
        lineChart.setOption(option)
    }
    //每日审核通过率、逾期率统计--折线图数据（默认显示当日的）
    const lineEchartsList = () => {
        queryDataViewCountIndexTwo({
            startDateTime: `${defaultValue1[0].format('YYYY-MM-DD')} 00:00:00`,
            endDateTime: `${defaultValue1[1].format('YYYY-MM-DD')} 23:59:59`
        }).then(res => {
            if (res.httpStatus === 200) {
                setAuditAndOverDue(res.data)
            }
        })
    }
    //每日审核通过率、逾期率统计--近七日
    const rateOnHandlerNearSeven = () => {
        setDefaultValue1(null)
        if (!isNearSevenAudit) {
            setDefaultValue1([moment().subtract(7, 'days'), moment()])
        } else {
            setDefaultValue1([moment(), moment()])
        }
        setNearSevenAudit(!isNearSevenAudit)
        setNearThirtyAudit(false)
    }
    //每日审核通过率、逾期率统计--近30日
    const rateOnHandlerNearThirty = () => {
        setDefaultValue1(null)
        if (!isNearThirtyAudit) {
            setDefaultValue1([moment().subtract(1, 'month'), moment()])
        } else {
            setDefaultValue1([moment(), moment()])
        }
        setNearThirtyAudit(!isNearThirtyAudit)
        setNearSevenAudit(false)
    }
    //每日审核通过率、逾期率统计--切换时间
    function rateOnChange(date) {
        if (!date || !date.length) {
            setDefaultValue1([moment(), moment()])
        } else {
            setDefaultValue1([date[0], date[1]])
        }
        setNearSevenAudit(false)
        setNearThirtyAudit(false)
    }
    //租赁商品占比--初始化饼状图
    const loadRoseEcharts = () => {
        const colors = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#71C8FF', '#73C0DE'];
        const lineChart = echarts.init(
            document.getElementsByClassName('roseEcharts')[0]
        )
        // 指定图表的配置项和数据
        const option = {
            tooltip: {
                // trigger: 'item',
                formatter(params) {
                    const { name, value, rate } = params.data
                    return `<div>
              <h3>${name}</h3>
              <div>数量：${value}</div>
              <div>占比：${rate}%</div>
            </div>`
                }
            },
            // legend: {
            //   top: '5%',
            //   left: 'center'
            // },
            series: [
                {
                    name: '租赁商品',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 16
                            // fontWeight: 'noral'
                        }
                    },
                    color:colors,
                    labelLine: {
                        show: false
                    },
                    data: rentList.map(item => ({
                        name: item.productName,
                        value: item.number,
                        rate: item.percentRate
                    }))
                }
            ]
        }

        // 使用刚指定的配置项和数据显示图表。
        lineChart.setOption(option)
    }
    //租赁商品占比--近七日
    const rentOnHandlerNearSeven = () => {
        setDefaultValue2(null)
        if (!isNearSevenRent) {
            setDefaultValue2([moment().subtract(7, 'days'), moment()])
        } else {
            setDefaultValue2([moment(), moment()])
        }
        setNearSevenRent(!isNearSevenRent)
        setNearThirtyRent(false)
    }
    //租赁商品占比--近30日
    const rentOnHandlerNearThirty = () => {
        setDefaultValue2(null)
        if (!isNearThirtyRent) {
            setDefaultValue2([moment().subtract(1, 'month'), moment()])
        } else {
            setDefaultValue2([moment(), moment()])
        }
        setNearThirtyRent(!isNearThirtyRent)
        setNearSevenRent(false)
    }
    //租赁商品占比--切换时间
    function rentOnChange(date) {
        if (!date || !date.length) {
            setDefaultValue2([moment(), moment()])
        } else {
            setDefaultValue2([date[0], date[1]])
        }
        setNearSevenRent(false)
        setNearThirtyRent(false)
    }

    const loadDataView1 = () => {
        queryDataViewCountIndexOne({
            startDateTime: `${moment().format('YYYY-MM-DD')} 00:00:00`,
            endDateTime: `${moment().format('YYYY-MM-DD')} 23:59:59`
        }).then(res => {
            setDataView1(res.data)
        })
    }
    const loadDataView2 = () => {
        queryDataViewCountIndexOneEither({
            startDateTime: `${moment().format('YYYY-MM-DD')} 00:00:00`,
            endDateTime: `${moment().format('YYYY-MM-DD')} 23:59:59`
        }).then(res => {
            setDataView2(res.data)
        })
    }

    //租赁商品占比--饼状环形图（默认显示当日的）
    const barEchartsList = () => {
        queryDataViewCountIndexThree({
            startDateTime: `${defaultValue2[0].format('YYYY-MM-DD')} 00:00:00`,
            endDateTime: `${defaultValue2[1].format('YYYY-MM-DD')} 23:59:59`
        }).then(res => {
            if (res.httpStatus === 200) {
                setRentList(res.data)
            }
        })
    }

    useEffect(() => {
        setAuditAndOverDue([])
        lineEchartsList()
    }, [defaultValue1])

    useEffect(() => {
        setRentList([])
        barEchartsList()
    }, [defaultValue2])

    useEffect(() => {
        loadLineEcharts()
    }, [auditAndOverDue])

    useEffect(() => {
        loadRoseEcharts()
    }, [rentList])

    useEffect(() => {
        loadDataView1()
        loadDataView2()
    }, [])

    const showArrowDirection = rate => {
        if (rate > 0) {
            return (
                <>
                    <Icon type="arrow-up" style={{ color: '#21b35a' }} />
                    <span style={{ color: '#1bbd6e' }}>{rate}%</span>
                </>
            )
        }
        return (
            <>
                <Icon type="arrow-down" style={{ color: '#f41f2b' }} />
                <span style={{ color: '#f41f2b' }}>{rate}%</span>
            </>
        )
    }

    return (
        <>
           <div>
             <div className={styles.dashboardBox}>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc1}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日注册人数</div>
                   <div className={styles.leftNum}>{dataView2.todayRegisterPersonQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img1} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc2}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日申请人数</div>
                   <div className={styles.leftNum}>{dataView2.todayApplyPersonQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img2} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc3}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日申请订单数</div>
                   <div className={styles.leftNum}>{dataView1.todayInputPieceQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img3} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc4}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日审核通过数</div>
                   <div className={styles.leftNum}>{dataView1.todayAuditPassQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img4} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc5}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日拒绝订单数</div>
                   <div className={styles.leftNum}>{dataView1.todayRefuseQuantity|| 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img5} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc1}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总注册人数</div>
                   <div className={styles.leftNum}>{dataView2.totalRegisterPersonQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img1} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc2}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总申请人数</div>
                   <div className={styles.leftNum}>{dataView2.totalApplyPersonQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img2} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc3}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总申请订单数</div>
                   <div className={styles.leftNum}>{dataView1.totalInputPieceQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img3} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc4}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总审核通过数</div>
                   <div className={styles.leftNum}>{dataView1.totalAuditPassQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img4} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc5}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总拒绝订单数</div>
                   <div className={styles.leftNum}>{dataView1.totalRefuseQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img5} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc3}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日到期还款数</div>
                   <div className={styles.leftNum}>{dataView1.todayExpireRepaymentQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img6} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc4}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日到期未还数</div>
                   <div className={styles.leftNum}>{dataView1.todayDueRemainNotReturnQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img7} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc5}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日提前还款数</div>
                   <div className={styles.leftNum}>{dataView1.todayAheadTimeRepaymentQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img8} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc1}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日逾期还款数</div>
                   <div className={styles.leftNum}>{dataView1.todayOverDueRepaymentQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img9} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc2}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日到期账单金额</div>
                   <div className={styles.leftNum}>{dataView1.todayDueQuantityStatementFee || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img10} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc3}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总到期还款数</div>
                   <div className={styles.leftNum}>{dataView1.totalExpireRepaymentQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img6} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc4}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总到期未还数</div>
                   <div className={styles.leftNum}>{dataView1.totalDueRemainNotReturnQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img7} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc5}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总提前还款数</div>
                   <div className={styles.leftNum}>{dataView1.totalAheadTimeRepaymentQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img8} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc1}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总逾期还款数</div>
                   <div className={styles.leftNum}>{dataView1.totalOverDueRepaymentQuantity || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img9} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc2}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总到期账单金额</div>
                   <div className={styles.leftNum}>{dataView1.totalDueQuantityStatementFee || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img10} alt=""/>
                 </div>
               </div>

               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc5}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日待收金额</div>
                   <div className={styles.leftNum}>{dataView2.todayReadyIncomeTotal || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img11} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc1}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日实收金额</div>
                   <div className={styles.leftNum}>{dataView2.todayAlreadyIncomeTotal || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img12} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc2}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日逾期还款金额</div>
                   <div className={styles.leftNum}>{dataView1.todayOverDueRepaymentQuantityStatementFee || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img13} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc3}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日碎屏险金额</div>
                   <div className={styles.leftNum}>{dataView2.todayBrokenFee || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img14} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc4}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>今日押金实收金额</div>
                   <div className={styles.leftNum}>{dataView2.todayDepositFee || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img15} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc5}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总待收金额</div>
                   <div className={styles.leftNum}>{dataView2.readyIncomeTotal || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img11} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc1}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总实收金额</div>
                   <div className={styles.leftNum}>{dataView2.alreadyIncomeTotal || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img12} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc2}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总逾期还款金额</div>
                   <div className={styles.leftNum}>{dataView1.totalOverDueRepaymentQuantityStatementFee || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img13} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc3}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总碎屏险金额</div>
                   <div className={styles.leftNum}>{dataView2.totalBrokenFee || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img14} alt=""/>
                 </div>
               </div>
               <div className={`${styles.dashboardInfo} ${styles.dashboardBgc4}`}>
                 <div className={styles.leftInfo}>
                   <div className={styles.leftTitle}>总押金实收金额</div>
                   <div className={styles.leftNum}>{dataView2.totalDepositFee || 0}</div>
                 </div>
                 <div className={styles.rightImg}>
                   <img src={img15} alt=""/>
                 </div>
               </div>
             </div>
           </div>
            <Row gutter={16}>
                <Col span={15}>
                    <Card className={styles.lefCard}>
                        <div className={styles.headerTop}>
                            <div className={styles.title}>
                                <h3>每日审核通过率、逾期率统计</h3>
                            </div>
                            <div>
                                <Button
                                    type={isNearSevenAudit ? 'primary' : 'default'}
                                    onClick={rateOnHandlerNearSeven}
                                >
                                    近7日
                                </Button>
                                <Button
                                    type={isNearThirtyAudit ? 'primary' : 'defalut'}
                                    onClick={rateOnHandlerNearThirty}
                                >
                                    近30日
                                </Button>
                                <RangePicker
                                    style={{ marginLeft: 10, width: 240 }}
                                    defaultValue={defaultValue1}
                                    onChange={e => rateOnChange(e)}
                                />
                            </div>
                        </div>
                        <div>单位：%</div>
                        <div id={styles.lineEcharts} className="lineEcharts" />
                    </Card>
                </Col>
                <Col span={9}>
                    <Card className={styles.lefCard}>
                        <div className={styles.headerTop}>
                            <div className={styles.title}>
                                <h3>租赁商品占比</h3>
                            </div>
                            <div style={{ textAlign: 'right' }}>
                                <Button
                                    type={isNearSevenRent ? 'primary' : 'default'}
                                    onClick={rentOnHandlerNearSeven}
                                >
                                    近7日
                                </Button>
                                <Button
                                    type={isNearThirtyRent ? 'primary' : 'defalut'}
                                    onClick={rentOnHandlerNearThirty}
                                >
                                    近30日
                                </Button>
                                <br />
                                <RangePicker
                                    style={{ width: 280, marginTop: 10 }}
                                    defaultValue={defaultValue2}
                                    onChange={e => rentOnChange(e)}
                                />
                            </div>
                        </div>
                        <div id={styles.roseEcharts} className="roseEcharts" />
                    </Card>
                </Col>
            </Row>
        </>
    )
}

export default Dashboard
